<template>
  <div>
    <div><input v-model="msg" /><button @click="translation">翻译</button></div>
    <div class="">{{ transMsg }}</div>
  </div>
</template>

<script lang="ts">
import { ref, defineComponent } from 'vue'
import axios from '../utils/axios'

export default defineComponent({
  name: 'Vuex',
  setup: () => {
    const msg = ref('')
    const transMsg = ref('')

    const translation = () => {
      axios
        .get('/translation/text', {
          params: {
            q: msg.value
          }
        })
        .then((res) => {
          const { data } = res
          transMsg.value = data.translation.join(',')
        })
    }

    return { msg, transMsg, translation }
  }
})
</script>

<style scoped></style>
